<!-- 视频页面 -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- 让部分国产浏览器默认采用高速模式渲染页面 -->
  <meta name="renderer" content="webkit">
  <link rel="stylesheet" href="css/Normalize.css">
  <link rel="stylesheet" href="css/style.css">
  <title>森茉文化传媒</title>
</head>
<style>
  .video-style {
    position: relative;
  }

  @media (min-width:750px) {
    html {
      background-color: rgba(238, 238, 238, 1);
    }
    .img-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin: 0 16rem;
    }
    .video-list-title {
      font-size: 1rem;
    }
    .video-list-desc {
      font-size: 0.8rem;
    }
  }

  @media (max-width:750px) {
    .header,
    .video-list-title,
    .video-list-desc {
      display: none;
    }
  }
</style>

<body>
  <header class='header'></header>
  <header class="detail-header">
    <div class="detail-back">
      <img class="icon-back" src="./images/ic_back.png" alt="">
    </div>
    <div class="detail-title color255 bold">视频</div>
    <div></div>
  </header>
  <div class="detail-container">
    <div class="img-list">
    </div>
  </div>
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="./js/BaseJs.js"></script>
  <script>
    $('.header').append(BaseJs.htmlHeader);
    BaseJs.isIE();
    BaseJs.calRem();
    BaseJs.navActive(1);
    BaseJs.searchBtnHover();

    getMore(1);
    var indexPage = 1;
    var isGetData = true;

    function getMore(page) {
      var url = BaseJs.api + 'media?type=1&page=' + page;
      BaseJs.getData(url, function (item) {
        var ndHtml = '';
        if (item.length > 0 && item != null) {
          for (var i = 0; i < item.length; i++) {
            var desc = item[i].description;
            var url = item[i].url;
            var title = item[i].title;
            var cover = item[i].cover;
            var id = item[i].id;
            var time = item[i].duration;
            var t = BaseJs.timer_format(time);
            ndHtml += '<a href=./video-detail.html?id=' + id +
              '><div class="mar30 video-style"><img class="video-img" src=' +
              item[i].cover +
              '><div class="hover-img"><img class="hover-control" src="./images/ic_video_start@2x.png"><p class="video-list-title">' +
              title + '</p><p class="video-list-desc">' + desc +
              '</p></div><div class="vide-list-time">' + t + '</div></div></a>'
          }
          $('.img-list').append(ndHtml);

          $('.video-style').hover(function () {
            $(this).find('.hover-img').css("display", "block");
          }, function () {
            $(this).find('.hover-img').css('display', 'none');
          })
        } else {
          isGetData = false;
        }
      })
    }

    $(window).bind("scroll", function () {
      if ($(document).scrollTop() + $(window).height() > $(document).height() - 10) {
        if (isGetData) {
          indexPage++;
          getMore(indexPage);
        } else {
          console.log('没有数据了');
        }
      }
    })

    $('.detail-back').click(function () {
      BaseJs.goBack();
    })
    
    $('#search-btn').click(function (e) {
      BaseJs.searchEvent(e);
    })
  </script>
</body>

</html>